<template>
<div>
  <el-table
      :data="tableData"
      border
      height="650"
      style="width: 100%"
  >
    <el-table-column
        prop="id"
        label="序号">
    </el-table-column>
    <el-table-column
        prop="goodsId"
        label="商品编号">
    </el-table-column>
    <el-table-column
        prop="name"
        label="商品名称">
    </el-table-column>
    <el-table-column
        prop="price"
        label="金额">
    </el-table-column>
    <el-table-column
        prop="number"
        label="数量">
    </el-table-column>
    <el-table-column
        prop="score"
        label="商品单个积分">
    </el-table-column>
    <el-table-column
        prop="payScore"
        label="支付积分">
    </el-table-column>
    <el-table-column
        prop="zong"
        label="总积分">
    </el-table-column>
    <el-table-column
        prop="orderId"
        label="订单编号">
    </el-table-column>
    <el-table-column
        prop="status"
        label="订单状态">
      <template slot-scope="scope">
        <span v-if="scope.row.status == 1">待支付</span>
        <span v-if="scope.row.status == 2">待发货</span>
        <span v-if="scope.row.status == 3">待收货</span>
        <span v-if="scope.row.status == 4">已完成</span>
        <span v-if="scope.row.status == 5">已取消</span>
      </template>
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="创建时间">
    </el-table-column>
    <el-table-column
        prop="payTime"
        label="支付时间">
    </el-table-column>
    <el-table-column
        prop="sendTime"
        label="发货时间">
    </el-table-column>
    <el-table-column
        prop="addressName"
        label="收货人姓名">
    </el-table-column>
    <el-table-column
        prop="tel"
        label="收货人手机号">
    </el-table-column>
    <el-table-column
        prop="province"
        label="省份">
    </el-table-column>
    <el-table-column
        prop="city"
        label="城市">
    </el-table-column>
    <el-table-column
        prop="county"
        label="区县">
    </el-table-column>
    <el-table-column
        prop="addressDetail"
        label="详细地址">
    </el-table-column>
    <el-table-column
        prop="areaCode"
        label="地区编码">
    </el-table-column>
    <el-table-column
        prop="userId"
        label="用户ID">
    </el-table-column>
    <el-table-column label="商品图片" align="center" prop="image" width="100">
      <template slot-scope="scope">
        <img :src="scope.row.image" :width="50" :height="50"/>
      </template>
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="chakan(scope.row.id)" type="text" size="small">查看</el-button>
        <el-button @click="fahuo(scope.row.id)" type="text" size="small" v-if="scope.row.status == 2">发货</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
      title="详情界面"
      :visible.sync="dialogVisible">
    id：{{qing.id}} <br>
    商品编号:{{qing.goodsId}} <br>
    商品名称:{{qing.name}} <br>
    订单状态:{{qing.status}} <br>
    价值金额:{{qing.price}} <br>
    购买数量:{{qing.number}} <br>
    一个商品价值积分:{{qing.score}} <br>
    总积分:{{qing.zong}} <br>
    订单编号:{{qing.orderId}} <br>
    下单时间:{{qing.createTime}} <br>
    支付时间:{{qing.payTime}} <br>
    收货人姓名:{{qing.addressName}} <br>
    收货人手机号:{{qing.tel}} <br>
    省份:{{qing.province}} <br>
    城市:{{qing.city}} <br>
    区县:{{qing.county}} <br>
    详细地址:{{qing.addressDetail}} <br>
    地区编码:{{qing.areaCode}} <br>
    发货时间:{{qing.sendTime}} <br>
    用户ID:{{qing.userId}} <br>
    商品图片:<img :src="qing.image" :width="100" :height="100"/> <br>
  </el-dialog>
</div>
</template>

<script >
import axios from "axios";

export default {
  data(){
    return{
      tableData: [],
      dialogVisible: false,
      qing:{},
    }
  },
  methods: {
    findPage(){
      axios.post(`http://localhost:6001/orders/orders/findAll`).then(res=>{
        console.log(res);
        this.tableData = res.data;
      })
    },
    fahuo(id) {
      this.$confirm('确认发货吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post(`http://localhost:6001/orders/orders/status?id=${id}`).then(res=>{
          if (res.data.code ==1){
            this.$message.success('处理成功');
            this.findPage();
          }else {
            this.$message.error('处理失败');
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'

        });
      });
    },
    chakan(id) {
      axios.post(`http://localhost:6001/orders/orders/findById?id=${id}`).then(res=>{
        this.qing = res.data.data;
        this.dialogVisible = true;
      })
    }
  },
  created() {
    this.findPage();
  }
}
</script>

<style >


</style>
